page {
    font-family: PingFang-SC-Regular, sans-serif;
}

/*
    背景色
*/
.bg-primary {
    background-color: $uni-color-primary;
}

.bg-white {
    background-color: $uni-bg-color;
}

/*
    弹性布局
*/
.flex {
    display: flex;
}

.flex-col-box{
    display: flex;
    flex-direction: column;
}

.flex-itemsCenter-box {
    display: flex;
    align-items: center;
}

.flex-justifyBetween-box {
    display: flex;
    justify-content: space-between;
}

.flex-justifyCenter-itemsCenter-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-justifyCenter-itemsEnd-box {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.flex-justifyBetween-itemsCenter-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-justifyBetween-itemsEnd-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.flex-justifyAround-itemsCenter-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.flex-justifyEnd-itemsCenter-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.flex-col-between-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flex-col-center-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-shark-1 {
    flex-shrink: 1;
}

.flex-1 {
    flex: 1;
}

/*
    宽高
*/
.w-full{
    width: 100%;
}

.h-full{
    height: 100%;
}

.h-screen{
    height: 100vh;
}

.h-page-empty{
    height: calc(100vh - 300px);
}

.w-h-full {
    width: 100%;
    height: 100%;
}

/*
    定位
*/
.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

/*
    左定位距离
*/
.left-0 {
    left: 0;
}

/*
    右定位距离
*/
.right-0 {
    right: 0;
}

/*
    上定位距离
*/
.top-0 {
    top: 0;
}

/*
    下定位距离
*/
.bottom-0 {
    bottom: 0;
}

.bottom-10 {
    bottom: 10px;
}

.bottom-20 {
    bottom: 20px;
}

/* 底部安全区 */
.bottom-safe {
    bottom: env(safe-area-inset-bottom);
}

/*
    圆角
*/
.rounded-4 {
    border-radius: 4px;
}

.rounded-6 {
    border-radius: 6px;
}

.rounded-8 {
    border-radius: 8px;
}

.rounded-10 {
    border-radius: 10px;
}

.rounded-12 {
    border-radius: 12px;
}

.rounded-14 {
    border-radius: 14px;
}

/*
    上边距
*/
.mt-2 {
    margin-top: 2px;
}

.mt-4 {
    margin-top: 4px;
}

.mt-6 {
    margin-top: 6px;
}

.mt-12 {
    margin-top: 12px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-20 {
    margin-top: 20px;
}

/*
    下边距
*/
.mb-12 {
    margin-bottom: 12px;
}

/*
    左边距
*/
.ml-6 {
    margin-left: 6px;
}

.ml-8 {
    margin-left: 8px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-12 {
    margin-left: 12px;
}

.ml-14 {
    margin-left: 14px;
}

.ml-16 {
    margin-left: 16px;
}

.ml-18 {
    margin-left: 18px;
}

.ml-20 {
    margin-left: 20px;
}

/*
    右边距
*/
.mr-12 {
    margin-right: 12px;
}

.mr-16 {
    margin-right: 16px;
}

/*
    左右边距
*/
.mx-10 {
    margin-left: 10px;
    margin-right: 10px;
}

.mx-20 {
    margin-left: 20px;
    margin-right: 20px;
}

/*
    上下边距
*/
.my-12 {
    margin-top: 12px;
    margin-bottom: 12px;
}

.my-14 {
    margin-top: 14px;
    margin-bottom: 14px;
}

.my-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

/*
    全外边距
*/
.m-12 {
    margin: 12px;
}

.m-20 {
    margin: 20px;
}

/*
    全内边距
*/
.p-6 {
    padding: 6px;
}

.p-8 {
    padding: 8px;
}

.p-10 {
    padding: 20rpx;
}

.p-12 {
    padding: 24rpx;
}

/*
    x轴内边距
*/
.px-10 {
    padding-left: 20rpx;
    padding-right: 20rpx;
}

.px-20 {
    padding-left: 20px;
    padding-right: 20px;
}


/*
    y轴内边距
*/
.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.py-14 {
    padding-top: 14px;
    padding-bottom: 14px;
}


.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}


/*
    左内边距
*/
.pl-4 {
    padding-left: 4px;
}

.pl-20 {
    padding-left: 20px;
}


/*
    下内边距
*/
.pb-4 {
    padding-bottom: 4px;
}

.pb-6 {
    padding-bottom: 6px;
}

.pb-8 {
    padding-bottom: 16rpx;
}

.pb-12 {
    padding-bottom: 24rpx;
}

.pb-safe{
    padding-bottom: env(safe-area-inset-bottom);
}


/*
    字体位置
*/
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}


/*
    字体颜色
*/
.text-primary {
    color: $uni-color-primary;
}

.text-default {
    color: $uni-text-color;
}

.text-grey {
    color: $uni-text-color-grey;
}

/*
    字体大小
*/
.fz-10 {
    font-size: 10px;
}

.fz-12 {
    font-size: 12px;
}

.fz-14 {
    font-size: 14px;
}

.fz-16 {
    font-size: 16px;
}

.fz-18 {
    font-size: 18px;
}

.fz-20 {
    font-size: 20px;
}

.fz-22 {
    font-size: 22px;
}

/*
    字体粗细
*/
.text-500 {
    font-weight: 500;
}

.text-600 {
    font-weight: 600;
}

.text-700 {
    font-weight: 700;
}

/*
    其他
*/
.box-border {
    box-sizing: border-box;
}

.white-space-nowrap {
    white-space: nowrap;
}

/*
    超出部分滚动
*/
.overflow-y-scroll {
    overflow-y: scroll;
}

.overflow-hidden {
    overflow: hidden;
}
